<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./lib/mui/css/mui.min.css" />
    <link
      rel="stylesheet"
      href="./lib/font-awesome-4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/product.css" />
    <title>Document</title>
  </head>
  <body>
    <!-- 全屏容器 -->
    <div class="lt-container">
      <!-- 头部 -->
      <div class="lt-header">
        <!-- 定义a链接返回上一页 -->
        <a href="javascript:history.go(-1);" class="home"
          ><i class="mui mui-icon mui-icon-arrowleft"></i
        ></a>
        <h4>商品详情</h4>
      </div>
      <!-- 主体 -->
      <div class="lt-main">
        <!-- 登录悬浮按钮 -->
        <div class="lt-login-ball">
          <a href="./login.html"
            ><i class="mui-icon mui-icon-contact"></i><p>登录</p></a
          >
        </div>
        <!-- 区域滚动 -->
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll">
            <!--这里放置真实显示的DOM内容-->
          </div>
        </div>
        <!-- 前往购物车 -->
        <div class="lt_go_cart">
          <a href="cart.html" class="mui-pull-left mui-btn mui-btn-positive"
            >前往购物车</a
          >

          <div class="mui-pull-right">
            <button class="mui-btn mui-btn-danger" id="addCart"
              >加入购物车</button
            >
            <button class="mui-btn mui-btn-warning">买买买</button>
          </div>
        </div>
      </div>
    </div>
    <script type="text/html" id="tmp">
        <!-- 轮播图 -->

      <div class="mui-slider">

        <!-- 图片区域 -->
        <div class="mui-slider-group mui-slider-loop">
          <!-- 添加假图, 最后一张图片 -->
          <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#"><img src="{{ pic[pic.length - 1].picAddr }}" /></a>
          </div>
          {{each pic v i }}
          <div class="mui-slider-item"><a href="#"><img src="{{ v.picAddr }}" /></a></div>
          {{ /each }}
          <!-- 添加假图, 第一张图片 -->
          <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#"><img src="{{ pic[0].picAddr }}" /></a>
          </div>
        </div>

        <!-- 小圆点结构 -->
        <div class="mui-slider-indicator">
          <!-- <div class="mui-indicator mui-active"></div> -->
          {{ each pic v i }}
          <div class="mui-indicator {{ i == 0? 'mui-active': ''}} "></div>
          {{ /each }}

        </div>

      </div>

      <!-- 产品标题 -->
      <div class="lt_pro_name item_box">
        <strong>{{ proName }}</strong>
      </div>

      <!-- 产品价格 -->
      <div class="lt_price item_box">
        价格:
        <span class="price">¥{{ price }}</span>
        <span class="oldPrice">¥{{ oldPrice }}</span>
      </div>

      <!-- 产品尺码 -->
      <div class="lt_size item_box">
        尺码:
        <!-- <span>40</span>
        <span class="current">40</span>
        <span>40</span> -->
        <%
          var start = size.split('-')[0];
          var end = size.split('-')[1];
        %>

        <% for(var i=start; i<=end; i++ ) {  %>
        <span>{{ i }}</span>
        <% } %>
      </div>


      <!-- 产品数量 -->
      <div class="lt_num item_box">
        数量:

        <!-- 数字框 -->
        <!-- data-numbox-min 配置可输入的最小值,
                       data-numbox-max 配置可输入的最大值
                       data-numbox-step 配置步长, 点击 +- 号修改的个数
                   -->
        <div class="mui-numbox" data-numbox-min="1" data-numbox-max="{{num }}" data-numbox-step='1'>
          <!-- "-"按钮，点击可减小当前数值 -->
          <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
          <input class="mui-numbox-input" type="number" value="1" />
          <!-- "+"按钮，点击可增大当前数值 -->
          <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
        </div>


        <span>剩余数量: {{ num }}双 </span>

      </div>


      <!-- 详情描述 -->
      <div class="lt_price item_box">
        详情: {{ proDesc }}
      </div>
    </script>

    <script src="./lib/zepto/zepto.min.js"></script>
    <script src="./lib/mui/js/mui.js"></script>
    <script src="./lib/artTemplate/template-web.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/product.js"></script>
  </body>
</html>
